<template>
    <el-header style="height: 30px;margin-left: 200px;">
        <SearchSchool @search="search"></SearchSchool>
    </el-header>
    <el-main>
        <el-table 
            :data="tableData"
            >
        <el-table-column prop="schoolName" label="学校" width="160"></el-table-column>
        <el-table-column prop="identificationCode" label="学校标识码" width="110"></el-table-column>
        <el-table-column prop="competentDepartment" label="主管部门" width="100"></el-table-column>
        <el-table-column prop="location" label="所在地" width="100"></el-table-column>
        <el-table-column prop="qualification" label="办学层次" width="100"></el-table-column>
        <el-table-column prop="notes" label="办学性质" width="100"></el-table-column>
        <el-table-column label="学校信息" width="130">
            <template v-slot="scope">
                <el-button type="primary" style="margin-left: 16px"
                 @click="button(scope.row.schoolName)">查看详情</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="drawer" direction="ttb" :with-header="false">
            <SchoolMajor :key="componentKey" textName="近五年录取人数" :school-prop="yAxis" :admissionNumbers="xAxis"></SchoolMajor>
            <SchoolMajor :key="componentKey" textName="专业录取排名" :school-prop="yAxis" :admissionNumbers="xAxisA"></SchoolMajor>
      </el-dialog>
    </el-main>
</template>

<script setup>
import { ref } from 'vue';
import SearchSchool from '../search/SearchSchool.vue';
import SchoolMajor from '../major/SchoolMajor.vue';
import axios from 'axios';
const tableData = ref([]);
const drawer = ref(false);
const xAxis = ref([{}]);
const xAxisA = ref([{}]);
const yAxis = ref([{}]);
const componentKey = ref(0);
const search = (data) => {
  tableData.value = data;
};
const button = async (schoolName) => {
  componentKey.value++; // 改变 key 值
  const result = await axios.get('http://localhost:8080/api/university-details?name='+schoolName);
  result.data.data.majors;
  var x = []
  var xA = []
  var y = []
  y[0] = result.data.data.majors[2024].professional;
  x[0] = result.data.data.majors[2020].admissions;
  x[1] = result.data.data.majors[2021].admissions;
  x[2] = result.data.data.majors[2022].admissions;
  x[3] = result.data.data.majors[2023].admissions;
  x[4] = result.data.data.majors[2024].admissions;  
  xA[0] = result.data.data.majors[2020].lowestOrder;
  xA[1] = result.data.data.majors[2021].lowestOrder;
  xA[2] = result.data.data.majors[2022].lowestOrder;
  xA[3] = result.data.data.majors[2023].lowestOrder;
  xA[4] = result.data.data.majors[2024].lowestOrder;
  // console.log(yAxis.value);
  yAxis.value = y;
  xAxis.value = x;
  xAxisA.value = xA;
  drawer.value = true;
}
</script>

<style>
.SearchSchool {
    position: fixed;
    z-index: 2;
}
.el-dialog {
    width: 1500px;
}
</style>